<template>
  <div>
    <!--顶部-->
    <div class="header_top">
      <el-row type="flex" justify="center">
        <el-col :span="24" class="container">
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <div class="header_left">
                <p>您好！</p>
                <div class="un_landed" v-show="!showname">
                  <p>请您</p>
                  <ul>
                    <router-link tag="li" to="/Login?show=true">登录</router-link>
                    <router-link tag="li" to="/Register">注册</router-link>
                    <router-link tag="li" to="/DoctorLogin" class="Color_gray6">医生端登录</router-link>
                  </ul>
                </div>
                <div class="already_landed" v-show="showname">
                  <p v-html="username"></p>
                  <p class="Mg-L10">欢迎来到云医康！</p>
                  <a href="javascript:void(0)">退出</a>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="header_right">
                <ul>
                  <li>
                    <el-dropdown
                      :show-timeout='100'>
                      <span class="el-dropdown-link">医生端APP</span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><img src="../../common/img/QRcode/QR_code_app.png" alt=""></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </li>
                  <li class="line_pile">|</li>
                  <li>
                    <el-dropdown :show-timeout='100'>
                      <span class="el-dropdown-link">用户端APP</span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><img src="../../common/img/QRcode/QR_code_gzh.png" alt=""></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </li>
                  <li class="line_pile">|</li>
                  <li>
                    <el-dropdown :show-timeout='100'>
                      <span class="el-dropdown-link">微信公众号</span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><img src="../../common/img/QRcode/QR_code_gzh.png" alt=""></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!--搜索部分-->
    <div class="header_search">
      <div class="container search_box">
        <div class="search_logo">
          <img src="../../common/img/icon/logo.png" alt="">
        </div>
        <div class="search_conent ">
          <el-autocomplete
            v-model="searchval"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入医生名、医院名、药店名"
            @select="handleSelect"
            :clearable="true"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.type }}</span>
            </template>
          </el-autocomplete>
          <el-button type="primary" :loading="issearch" @click="searchLoding">{{ searchname }}</el-button>
        </div>
        <div class="admission_btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        showname: false,//已登录和未登录状态控制
        username: '王满强',//用户名
        searchname: '搜索',//搜索按钮的文字
        issearch: false,//搜索按钮是否显示动效加载中...
        searchval: '',//搜索的值
        restaurants: [],
        timeout: null
      }
    },
    methods: {
      searchLoding() {
        this.issearch = !this.issearch;
        this.searchname = '搜索中...';
        setTimeout(() => {
          this.issearch = !this.issearch;
          this.searchname = '搜索';
        }, 2000)
      },
      loadAll() {
        return [
          {"value": "小儿感冒", "type": "疾病"},
          {"value": "成人感冒", "type": "文章"},
          {"value": "感冒胶囊", "type": "疾病"},
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
//        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>
<style>
  /*搜索框的样式从定向*/
  .search_conent .el-autocomplete {
    width: 420px;
    border: 1px solid rgba(18, 141, 255, 1);
    height: 100%;
  }

  .search_conent .el-input {
    height: 100%;
  }

  .search_conent .el-input__inner {
    border: none;
    cursor: pointer;
    height: 100%;
  }

  .el-scrollbar li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
<style scoped>
  /*头部顶部*/
  .header_top {
    height: 40px;
    background: rgba(221, 221, 221, 1);
  }

  .el-col,
  .el-col > div {
    height: 100%;
    line-height: 40px;
  }

  .header_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .header_left .un_landed,
  .header_left .already_landed {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  .header_left .un_landed li {
    float: left;
    color: rgba(18, 141, 255, 1);
    margin-right: 20px;
    cursor: pointer;
  }
  .header_right{
    overflow: hidden;
  }
  .header_right .el-dropdown-link {
    display: block;
    height: 100%;
  }

  .header_right ul {
    overflow: hidden;
    float: right;
  }

  .header_right li {
    float: left;
    font-size: 14px;
    color: rgba(102, 102, 102, 1);
    cursor: pointer;
  }
  .el-dropdown-menu{
    padding: 0;
    margin: 0;
  }
  .el-dropdown-menu__item {
    width: 160px;
    height: 170px;
    padding: 5px;
  }

  .el-dropdown-menu__item img {
    width: 100%;
    height: 100%;
  }

  .header_right li.line_pile {
    padding: 0 20px;
  }

  /*搜索部分*/
  .header_search {
    height: 135px;
  }

  .header_search .search_box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .search_logo {
    margin-right: 100px;
  }

  .search_conent {
    position: relative;
    display: flex;
    align-items: center;
    width: 520px;
    height: 50px !important;
    margin-right: 60px;
  }

  .search_conent > .el-button {
    width: 100px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    height: 100%;
  }

  /*入驻按钮*/
  .admission_btn {
    width: 144px;
    height: 88px !important;
    background: url("../../common/img/icon/icon_jgrz.png") no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
  }

</style>
